
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Drawer, Form, Button, Col, Row, Descriptions } from 'antd';
import util from 'utils/util';

// 与model建立连接
@connect(({ sysMenuModel }) => ({
    detailShowVisible: sysMenuModel.detailShowVisible,
    detailData: sysMenuModel.detailData
}))
class Detail extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            //用于重新加载数据项
            fromKey: Math.random()
        };
    }

    componentDidMount() {
    }

    onClose = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'sysMenuModel/updateState',
            payload: { detailShowVisible: false },
        });
    };

    render() {
        const { detailShowVisible, detailData } = this.props;
        const { fromKey } = this.state;
        const { onClose } = this;
        return (
            <div>
                <Drawer
                    title="详情"
                    width={720}
                    onClose={onClose}
                    visible={detailShowVisible}
                >
                    <Descriptions column={2} bordered size="small">

                        <Descriptions.Item label="菜单名称">{detailData.menu_name}</Descriptions.Item>
                        <Descriptions.Item label="父菜单ID">{detailData.parent_id}</Descriptions.Item>
                        <Descriptions.Item label="显示顺序">{detailData.order_num}</Descriptions.Item>
                        <Descriptions.Item label="请求地址">{detailData.url}</Descriptions.Item>
                        <Descriptions.Item label="菜单类型（M目录 C菜单 F按钮）">{detailData.menu_type}</Descriptions.Item>
                        <Descriptions.Item label="菜单状态（0显示 1隐藏）">{detailData.visible}</Descriptions.Item>
                        <Descriptions.Item label="权限标识">{detailData.perms}</Descriptions.Item>
                        <Descriptions.Item label="菜单图标">{detailData.icon}</Descriptions.Item>
                    </Descriptions>
                </Drawer>
            </div>
        );
    }
}

export default Detail;